<template>
	<view class="everyWidth relative">
		<uni-nav-bar :statusBar="true" leftIcon="back" title="我的卡包" @clickLeft="$tab.back()" :border="false"
			backgroundColor="#fff" color="#000">
		</uni-nav-bar>
		<view class="py-20 text-right text-32 bg-F8F8F8 px-32" @click="adminBtn" v-if="result.length > 0">
			管理卡片
		</view>
		<view class="px-36 pt-32">
			<s-pull-scroll :fixed="false" ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
				<block v-for="(item,index) in result" :key="index">
					<bankCardBag :cardData="item" :untie="untie" :index="index+1" @rightClick="rightClick(item)">
					</bankCardBag>
					<view class="" style="height: 16px;">
					</view>
				</block>
			</s-pull-scroll>
			<view class="mt-200">
				<IsShow :isShowText="'暂无银行卡请添加'"
					isShowImg="https://coo.fcios.com/profile/upload/2023/01/16/img_tianjiayinghangka.png"
					:isShow="result.length == 0"></IsShow>
			</view>
		</view>

		<bottom-btn txt="添加银行卡" icon="https://coo.fcios.com/profile/upload/2023/01/16/icon_tianjia.png"
			@click="addBankCard">
		</bottom-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				untie: false,
				result: [],
				isShow: true,
				flag: false,
				inway: 0
			}
		},
		onLoad() {

		},
		onShow() {
			this.refresh()
		},
		onReady() {},
		methods: {
			adminBtn() {
				this.untie = !this.untie
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					var that = this;
					this.$Api.user.bankCardList({
						pageNum: pullScroll.page,
						pageSize: 10,
					}).then(res => {
						console.log(res, 'res')
						res.data = res.rows || []
						res.data.forEach(obj => {
							obj.original = obj.cardNo;
							obj.cardNo = obj.cardNo.replace(/(\d{4})\d+(\d{4})/,
								'$1********$2');
							obj.isEye = true;
						})
						if (pullScroll.page == 1) {
							that.result = [];
							that.result = res.data;
							uni.setStorageSync('result', that.result)
							pullScroll.success();
						} else {
							that.result = that.result.concat(res.data);
							pullScroll.success();
						}
						if (pullScroll.page * 10 >= res.total && that.result.length != 0) {
							pullScroll.finish();
						}
					})
				}, 500);
			},
			rightClick(item) {
				var that = this;
				if (this.untie) { //解绑卡片
					uni.showModal({
						title: '提示',
						content: '是否确认解绑？',
						success: function(res) {
							if (res.confirm) {
								that.$Api.user.unbinding({
									ids:item.id
								}).then(res => {
									console.log(res, '解绑')
									that.$modal.msg('解绑成功!')
									that.refresh()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else { //查看完整卡号
					item.isEye = !item.isEye;
					if (!item.isEye) {
						item.cardNoF = item.cardNo
						item.cardNo = item.original;
					} else {
						item.cardNo = item.cardNoF
					}
				}
			},
			adminBtn() {
				this.untie = !this.untie
			},
			addBankCard() {
				uni.navigateTo({
					url: "/pages/mine/bankCard/addSavings"
				})
			},
		}
	}
</script>

<style lang="scss">

</style>